<clr-modal
    [(clrModalOpen)]="opened"
    [clrModalStaticBackdrop]="true"
    [clrModalClosable]="false">
    <h3 class="modal-title">{{ 'RESET_PWD.TITLE' | translate }}</h3>
    <inline-alert
        class="modal-title"
        (confirmEvt)="confirmCancel($event)"></inline-alert>
    <div class="modal-body body-format">
        <form #resetPwdForm="ngForm" class="clr-form clr-form-horizontal">
            <div class="clr-form-control">
                <label for="newPassword" class="clr-control-label required">{{
                    'CHANGE_PWD.NEW_PWD' | translate
                }}</label>
                <div
                    class="clr-control-container"
                    [class.clr-error]="!getValidationState('newPassword')">
                    <div class="clr-input-wrapper">
                        <input
                            class="clr-input pwd-input"
                            [type]="showNewPwd ? 'text' : 'password'"
                            id="newPassword"
                            placeholder="{{
                                'PLACEHOLDER.NEW_PWD' | translate
                            }}"
                            required
                            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
                            name="newPassword"
                            [(ngModel)]="password"
                            #newPassInput="ngModel"
                            size="25"
                            (input)="handleValidation('newPassword', false)"
                            (blur)="handleValidation('newPassword', true)" />
                        <clr-icon
                            *ngIf="!showNewPwd"
                            shape="eye"
                            class="pw-eye"
                            (click)="showNewPwd = !showNewPwd"></clr-icon>
                        <clr-icon
                            *ngIf="showNewPwd"
                            shape="eye-hide"
                            class="pw-eye"
                            (click)="showNewPwd = !showNewPwd"></clr-icon>
                        <clr-icon
                            class="clr-validate-icon"
                            shape="exclamation-circle"></clr-icon>
                    </div>
                    <clr-control-error
                        *ngIf="!getValidationState('newPassword')">
                        {{ 'TOOLTIP.PASSWORD' | translate }}
                    </clr-control-error>
                </div>
            </div>
            <div class="clr-form-control">
                <label for="reNewPassword" class="clr-control-label required">{{
                    'CHANGE_PWD.CONFIRM_PWD' | translate
                }}</label>
                <div
                    class="clr-control-container"
                    [class.clr-error]="!getValidationState('reNewPassword')">
                    <div class="clr-input-wrapper">
                        <input
                            class="clr-input pwd-input"
                            [type]="showConfirmPwd ? 'text' : 'password'"
                            id="reNewPassword"
                            placeholder="{{
                                'PLACEHOLDER.CONFIRM_PWD' | translate
                            }}"
                            required
                            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
                            name="reNewPassword"
                            [(ngModel)]="confirmPwd"
                            #reNewPassInput
                            size="25"
                            (input)="handleValidation('reNewPassword', false)"
                            (blur)="handleValidation('reNewPassword', true)" />
                        <clr-icon
                            *ngIf="!showConfirmPwd"
                            shape="eye"
                            class="pw-eye"
                            (click)="
                                showConfirmPwd = !showConfirmPwd
                            "></clr-icon>
                        <clr-icon
                            *ngIf="showConfirmPwd"
                            shape="eye-hide"
                            class="pw-eye"
                            (click)="
                                showConfirmPwd = !showConfirmPwd
                            "></clr-icon>
                        <clr-icon
                            class="clr-validate-icon"
                            shape="exclamation-circle"></clr-icon>
                    </div>
                    <clr-control-error
                        *ngIf="!getValidationState('reNewPassword')">
                        {{ 'TOOLTIP.CONFIRM_PWD' | translate }}
                    </clr-control-error>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <span
            class="spinner spinner-inline loading-top"
            [hidden]="showProgress === false"></span>
        <button type="button" class="btn btn-outline" (click)="close()">
            {{ 'BUTTON.CANCEL' | translate }}
        </button>
        <button
            type="button"
            class="btn btn-primary"
            [disabled]="!isValid || showProgress"
            (click)="send()">
            {{ 'BUTTON.OK' | translate }}
        </button>
    </div>
</clr-modal>
